<template>
  <div class="payorderdetail">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom:15px;">
      <el-breadcrumb-item :to="{ path: '/tobepaidlist' }">待支付清单</el-breadcrumb-item>
      <el-breadcrumb-item>待支付清单详情</el-breadcrumb-item>
    </el-breadcrumb>
    <h5
      style="margin:0;margin-bottom:25px;margin-top:-31px;text-align:right;"
    >付款单ID：{{datalist.code}}</h5>
 <!-- 壹链盟 样式 -->

    <el-steps :active="active" align-center v-if="nums==4">
      <el-step title="发起付款" :description="initTimes(datalist.pushTime)"></el-step>
      <el-step title="壹链盟代付"></el-step>
      <el-step title="支付成功" :description="initTimes(datalist.bankPayTime)"></el-step>
      <el-step title="完成" :description="initTimes(datalist.endTime)"></el-step>
    </el-steps>

    <el-steps :active="active" align-center v-else>
      <el-step title="提交审核(H3)" :description="initTimes(datalist.verifyTime)"></el-step>
      <el-step title="发起付款" :description="initTimes(datalist.pushTime)"></el-step>
      <el-step title="金蝶EAS系统" :description="initTimes(datalist.payTime)"></el-step>
      <el-step title="银行付款" :description="initTimes(datalist.bankPayTime)"></el-step>
      <el-step title="完成" :description="initTimes(datalist.endTime)"></el-step>
    </el-steps>

   

    <table class="firstD" cellpadding="0" cellspacing="0">
      <tr>
        <td colspan="6" rowspan>摘要（付款事项）：{{datalist.summary}}</td>
      </tr>
      <tr>
        <td>付款用途</td>
        <td>{{datalist.purpose}}</td>
        <td>金额(含税)</td>
        <td>￥{{this.toFixedFn(datalist.amount)}}</td>
        <td>税率</td>
        <td>{{initTax(datalist.taxRate)}}</td>
      </tr>
      <tr>
        <td>税费（元）</td>
        <td>￥{{this.toFixedFn(datalist.tax)}}</td>
        <td>不含税金额（元）</td>
        <td>￥{{this.toFixedFn(datalist.amountWithoutTax)}}</td>
        <td>实际支付金额（元）</td>
        <td>￥{{this.toFixedFn(datalist.payAmount)}}</td>
      </tr>
    </table>
    <div class="comD">
      <div class="title">
        <p>收款账号信息</p>
        <p>
          <span>角色：</span>
          {{initmainBodyType(datalist.mainBodyType)}}
        </p>
      </div>
      <ul>
        <li>
          <span>收款单位：</span>
          {{datalist.recName}}
        </li>
        <li>
          <span>开卡省市：</span>
          {{datalist.recProvinceName}}{{datalist.recCityName}}
        </li>
        <li>
          <span>开户行名称（支行）：</span>
          {{datalist.recSubBankName}}
        </li>
        <li>
          <span>收款账号：</span>
          {{datalist.recAccNo}}
        </li>
        <li>
          <span>开户编码：</span>
          {{datalist.recOpenCode}}
        </li>
        <li>
          <span>联行号：</span>
          {{datalist.recLinkNumber}}
        </li>
      </ul>
    </div>
    <div class="comD">
      <div class="title">
        <p>
          付款账号信息
          <span class="sign" v-if="nums==4">【E-Bill付款】</span>
        </p>
      </div>
      <ul>
        <li>
          <span>付款单位：</span>
          {{datalist.paymentName}}
        </li>
        <li>
          <span>开户行名称（支行）：</span>
          {{datalist.paymentBankName}}
        </li>
        <li>
          <span>账号：</span>
          {{datalist.paymentAccNo}}
        </li>
        <li>
          <span>纳税人识别号：</span>
          {{datalist.paymentTaxpayerNumber}}
        </li>
      </ul>
    </div>
    <h5>附件</h5>
    <table cellpadding="0" cellspacing="0" class="tabs tabss">
      <tr class="tabexplain">
        <td>文件名（页数）</td>
        <td>创建人</td>
        <td>上传时间</td>
        <td>操作</td>
      </tr>
      <tr v-for="(item,index) in enclosure" v-if="enclosure.length != 0" :key="index">
        <td>{{initFileType(item.type)}}({{item.num}})</td>
        <td>{{item.uploadName}}</td>
        <td>{{initTimes(item.uploadTime)}}</td>
        <td :rowspan="enclosure.length" v-if="index==0">
          <el-button type="text" size="small" icon="el-icon-download" @click="downAll">下载文件</el-button>
        </td>
      </tr>
      <tr v-if="!enclosure.length">
        <td colspan="4">暂无数据...</td>
      </tr>
    </table>
    <div class="recordsTab" v-if='nums!=4'>
      <h5 :class="recordActive==1? 'active':''" @click="checkRecord">审核记录</h5>
      <h5 :class="recordActive==2? 'active':''" @click="pushRecord">推送记录</h5>
      <h5 :class="recordActive==3? 'active':''" @click="payRecord">支付记录</h5>
    </div>
    <div class="recordsTab" v-if='nums==4'>
      <h5>支付记录</h5>
    </div>
    <div v-if="nums!=4">
      <table cellpadding="0" cellspacing="0" class="tabs recordTab" v-if="recordActive==1">
      <tr class="tabexplain">
        <td>支付清单编号</td>
        <td>操作</td>
        <td>审核意见</td>
        <td>操作人</td>
        <td>推送时间</td>
      </tr>
      <tr v-for="(item,index) in checklist" :key="index">
        <td>{{item.payInventoryCode}}</td>
        <td>{{initoprationFlag(item.oprationFlag)}}</td>
        <td>{{item.content}}</td>
        <td>{{item.userName}}</td>
        <td>{{initTimes(item.auditTime)}}</td>
      </tr>
      <tr v-if="!checklist.length">
        <td colspan="5">暂无数据...</td>
      </tr>
    </table>
    <div class="pushRecord" v-if="recordActive==2">
      <table cellpadding="0" cellspacing="0" class="tabs">
        <tr class="tabexplain">
          <td>推送状态</td>
          <td>备注</td>
          <td>操作人</td>
          <td>推送时间</td>
        </tr>
        <tr v-for="(item,index) in pushList" :key="index">
          <td>{{pushStatusInit(item.pushStatus)}}</td>
          <td>{{item.remark}}</td>
          <td>{{item.userName}}</td>
          <td>{{initTimes(item.createTime)}}</td>
        </tr>
        <tr v-if="!pushList.length">
          <td colspan="4">暂无数据...</td>
        </tr>
      </table>
      <el-button type="primary" style="margin-top:15px;" icon="el-icon-tickets" @click="skipJD">日志查询</el-button>
    </div>
    <table cellpadding="0" cellspacing="0" class="tabs tabss" v-if="recordActive==3">
      <tr class="tabexplain" v-if="nums!=4">
        <td>支付流水号</td>
        <td>付款金额</td>
        <td>支付状态</td>
        <td>备注</td>
        <td>支付时间</td>
        <td>收款方名称</td>
        <td>收款方账号</td>
        <td>付款方名称</td>
        <td>付款方账号</td>
        <td>系统/人工</td>
      </tr>
      
      <tr v-for="(item,index) in payData" :key="index">
        <td>{{item.payId}}</td>
        <td>{{toFixedFn(item.payeeAmount)}}</td>
        <td>{{initpayStatus(item.payStatus)}}</td>
        <td>{{item.remark}}</td>
        <td>{{initTimes(item.payTime)}}</td>
        <td>{{item.payeeName}}</td>
        <td>{{item.payeeAccountNumber}}</td>
        <td>{{item.payerName}}</td>
        <td>{{item.payerAccountNumber}}</td>
        <td>{{item.dataSource}}</td>
      </tr>
       
      <tr v-if="!payData.length">
        <td colspan="10">暂无数据...</td>
      </tr>
    </table>
    </div>
    <div v-else-if="nums==4">
<table cellpadding="0" cellspacing="0" class="tabs tabss">
<tr class="tabexplain" >
        <td>资产编号</td>
        <td>付款金额</td>
        <td>支付状态</td>
        <td>备注</td>
        <td>支付时间(融资时间)</td>
        <td>资金方-企业名称</td>
        <td>资金方-开户行银行</td>
        <td>资金方-收款账户</td>
        <td>系统/人工</td>
      </tr>
      <tr v-for="(item,index) in payData" :key="index" >
        <td>{{item.payId}}</td>
        <td>{{toFixedFn(item.payeeAmount)}}</td>
        <td>{{initpayStatus(item.payStatus)}}</td>
        <td>{{item.remark}}</td>
        <td>{{initTimes(item.payTime)}}</td>
        <td>{{item.payerName}}</td>
        <td>{{item.payerAccountBank}}</td>
        <td>{{item.payerAccountNumber}}</td>
        <td>{{item.dataSource}}</td>
      </tr>
         <tr v-if="!payData.length">
        <td colspan="10">暂无数据...</td>
      </tr>
  </table>
    </div>
  </div>
</template>

<script>
import utils from "../../../../common/utils";
import api from "@/api/apiPath";
export default {
  data() {
    return {
      dialogVisible: false,
      id: this.$route.query.id,
      recordActive: 1,
      payData: [],
      totalRow: {},
      active: -1,
      datalist: {},
      pushList: [],
      checklist: [],
      enclosure: [], //申请附件
      // 付款方式 ID
      nums: null
    };
  },
  methods: {
    downAll() {
      window.open(
        `${this.$axios.baseURL}/kingdee/api/fileDownload?code=${this.datalist.code}`
      );
    },
    initFileType(val) {
      switch (val) {
        case 0:
          return "其他";
          break;
        case 1:
          return "发票";
          break;
        case 2:
          return "渠道合作通知函";
          break;
        case 3:
          return "佣金确认表";
          break;
        case 4:
          return "认购书";
          break;
        case 5:
          return "身份证复印件";
          break;
        case 6:
          return "银行账户信息复印件";
          break;
        case 7:
          return "退款凭据";
          break;
        case 8:
          return "支付清单";
          break;
        case 9:
          return "付款审批意见";
          break;
        case 10:
          return "融资协议";
          break;
        case 11:
          return "开单协议";
          break;
      }
    },
    initmainBodyType(val) {
      if (val == 1) {
        return "网络推客";
      }
      if (val == 2) {
        return "经纪人";
      }
      if (val == 3) {
        return "经纪公司";
      }
      if (val == 4) {
        return "购房者";
      }
      if (val == 5) {
        return "公司员工";
      }
      if (val == 6) {
        return "第三方公司";
      }
    },
    commonline(row, column, cellValue, index) {
      if (index == 0) {
        return "——";
      }
      return cellValue;
    },
    indexFun(index) {
      if (index == 0) {
        return "合计";
      }
      return index;
    },
    downImg(url) {
      var image = new Image();
      image.setAttribute("crossOrigin", "anonymous");
      var _this = this;
      image.onload = function() {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
        var a = document.createElement("a"); // 生成一个a元素
        var event = new MouseEvent("click"); // 创建一个单击事件
        a.download = _this.projectName || "photo"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      image.src = url;
    },
    loadData() {
      this.axios
        .post(api.PAYLISTDETAIL, { id: this.id })
        .then(res => {
          this.nums = res.data.data.details.paymentSystem;
          if(this.nums==2){
            this.nums=4
          }
          if (res.data.code == 200) {
            this.datalist = res.data.data.details;
            this.pushList = res.data.data.payPushList;
            this.payData = res.data.data.payResultList;
            //判断当前是否为壹链盟支付
            if (res.data.data.enclosureList.length != 0) {
              this.enclosure = res.data.data.enclosureList;
            }
            if (this.nums == 4) {
              if (res.data.data.details.pushTime) {
                this.active = 1;
              }
              if (res.data.data.details.bankPayTime) {
                this.active = 3;
              }
              if (res.data.data.details.endTime) {
                this.active = 4;
              }
              this.recordCheck(res.data.data.details.code);
            } else if (this.nums == 1) {
              if (res.data.data.details.verifyTime) {
                this.active = 1;
              }
              if (res.data.data.details.pushTime) {
                this.active = 2;
              }
              if (res.data.data.details.payTime) {
                this.active = 3;
              }
              if (res.data.data.details.bankPayTime) {
                this.active = 4;
              }
              if (res.data.data.details.endTime) {
                this.active = 5;
              }
              this.recordCheck(res.data.data.details.code);
              // this.loadorderlist();
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    checkRecord() {
      this.recordActive = 1;
    },
    pushRecord() {
      this.recordActive = 2;
    },
    payRecord() {
      this.recordActive = 3;
    },
    recordCheck(code) {
      this.axios
        .post(api.RECORDCHECK, { payListCode: code })
        .then(res => {
          if (res.data.code == 200) {
            this.checklist = res.data.data;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    warn(msg) {
      this.$alert(msg, "提示", {
        type: "error",
        confirmButtonText: "确定",
        callback: action => {}
      });
    },
    toFixedFn(cellValue) {
      //保留两位小数并且千分位展示
      if (
        cellValue != undefined &&
        cellValue.toString() != "" &&
        cellValue != null
      ) {
        let tempValue = parseFloat(cellValue);
        return tempValue
          .toFixed(2)
          .toString()
          .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      }
    },
    initTime(row, column, cellValue, index) {
      return this.getTimeString(cellValue);
    },
    initTimes(value) {
      return utils.getTimeString(value);
    },
    initMoney(row, column, cellValue, index) {
      return this.toFixedFn(cellValue);
    },
    initMoney1(row, column, cellValue, index) {
      if (index == 0) {
        return "——";
      }
      return this.toFixedFn(cellValue);
    },
    initProportion(row, column, cellValue, index) {
      if (index == 0) {
        return "——";
      }
      if (cellValue != null) {
        return cellValue + "%";
      }
    },
    initpayStatus(val) {
      if (val == 3) {
        return "成功";
      }
      if (val == 4) {
        return "失败";
      }
      if (val == 6) {
        return "交易未确认";
      }
    },
    initCategory(value) {
      if (value == 1) {
        return "支付佣金";
      }
      if (value == 2) {
        return "电商费退款";
      }
      if (value == 3) {
        return "跟投分红";
      }
      if (value == 4) {
        return "开发商返还款";
      }
      if (value == 5) {
        return "经纪人奖励";
      }
      if (value == 6) {
        return "支付团奖";
      }
    },
    initTax(val) {
      return (val * 100).toFixed(2) + "%";
    },
    initoprationFlag(val) {
      if (val == 0) {
        return "申请";
      }
      if (val == 1) {
        return "审核通过";
      }
      if (val == 2) {
        return "审核拒绝";
      }
    },
    getTimeString(timestamp) {
      if (timestamp) {
        const time = new Date(timestamp);
        let dateStr = "";
        const year = time.getFullYear();
        const month =
          String(time.getMonth() + 1).length === 1
            ? "0" + (time.getMonth() + 1)
            : time.getMonth() + 1;
        const day =
          String(time.getDate()).length === 1
            ? "0" + time.getDate()
            : time.getDate();
        dateStr = year + "-" + month + "-" + day;
        let timeStr = "";
        const hours = time.getHours();
        const hh = String(hours).length === 1 ? "0" + hours : hours;
        const minutes = time.getMinutes();
        const mm = String(minutes).length === 1 ? "0" + minutes : minutes;
        const seconds = time.getSeconds();
        const ss = String(seconds).length === 1 ? "0" + seconds : seconds;
        timeStr = `${hh}:${mm}:${ss}`;
        // timeStr = `${hh}:${mm}`
        // return dateStr + ' ' + timeStr
        return dateStr;
      } else {
        return "";
      }
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        } else if (index == columns.length - 2 || index == columns.length - 3) {
          if (index == columns.length - 2) {
            sums[index] = this.toFixedFn(this.totalRow.brokerShouldAmount);
          }
          if (index == columns.length - 3) {
            sums[index] = this.toFixedFn(this.totalRow.shouldAmount);
          }
          return;
        } else {
          sums[index] = "——";
          return;
        }
      });
      return sums;
    },
    pushStatusInit(val) {
      if (val == 1) {
        return "成功";
      }
      if (val == 2) {
        return "失败";
      }
    },
    skipJD() {
      this.$router.push({
        path: "/jindieManage"
      });
    }
  },
  mounted() {
    this.loadData();
  }
};
</script>

<style lang="stylus" scope>
.payorderdetail {
  .firstD {
    width: 100%;
    margin: 50px 0;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;

    td {
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
      padding: 8px 0;
      text-indent: 15px;
      font-size: 14px;
    }
  }

  .comD {
    font-size: 14px;
    margin-bottom: 20px;

    ul, li {
      list-style: none;
      padding-left: 0;
    }

    ul {
      overflow: hidden;
    }

    li {
      width: 32%;
      float: left;
      padding-left: 20px;
      line-height: 38px;

      span {
        display: inline-block;
      }
    }

    .title {
      display: flex;
      height: 50px;
      background-color: rgba(243, 243, 243, 1);
      padding: 0 20px;
      border-radius: 5px;
      justify-content: space-between;
      font-size: 14px;
      font-weight: 400;
    }
  }

  .pushRecord {
    &>div {
      overflow: hidden;
      height: 38px;
      line-height: 38px;
      margin-bottom: 15px;

      h5 {
        float: left;
        margin: 0;
      }
    }
  }

  .tabs {
    width: 100%;
    font-size: 14px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;

    td {
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
      height: 38px;
      line-height: 38px;
      width: 25%;
      text-align: center;
    }

    .tabexplain {
      background-color: rgba(243, 243, 243, 1);
    }
  }

  .tabss {
    td {
      width: 10%;
    }
  }

  .recordTab {
    td {
      width: 20%;
    }
  }

  .recordsTab {
    h5 {
      display: inline-block;
      cursor: pointer;
      margin-right: 15px;
      padding-bottom: 5px;
    }

    .active {
      color: #409EFF;
      border-bottom: 2px solid #409EFF;
    }
  }
}

.sign {
  color: orange;
  margin-left: 20px;
}
</style>
